<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手动筛选交通信号图，肝ing</title>
</head>
<body>
    <canvas id="cv1" width="1280" height="720"></canvas>
    <canvas id="cv2" width="1280" height="720"></canvas>
    <span id="isTrue"> </span>
    <span id="isTooFar"></span>
    <textarea id="tarHandIdxDicBox"> </textarea>
    <input id="idxBox"/>
    <img id="img1"/>
    <img id="img2"/>
    <style>
        canvas {
            width: 800px;
        }
        img {
            display: none;
        }
        #isTrue {
            position: fixed;
            right: 50px;
            top: 0;
            font-size: 50px;
            user-select: none;
            cursor: pointer;
        }
        #tarHandIdxDicBox {
            position: fixed;
            display: none;
            right: 50px;
            top: 75px;
            font-size: 10px;
        }
        #idxBox {
            position: fixed;
            display: none;
            width: 5em;
            right: 50px;
            top: 150px;
            font-size: 20px;
        }
    </style>
    <script src="./handDic.js"></script>
    <script>
        let picDir = '/train/'
        let keyArr = Object.keys(handDic);
        let keyTrueOrFalse = []
        window.tarHandIdxDic = window.tarHandIdxDic || {}
        // 加载历史标注数据
        if (localStorage.tarHandIdxDic) {
            window.tarHandIdxDic = JSON.parse(localStorage.tarHandIdxDic)
        }
        tarHandIdxDicBox.onchange = function(ev) {
            window.tarHandIdxDic = JSON.parse(ev.target.value)
            localStorage.tarHandIdxDic = JSON.stringify(window.tarHandIdxDic);
        }
        idxBox.addEventListener('keydown', function(ev) {
            console.log('keydown', ev.target.value)
            setTimeout(()=>{
                idx = parseInt(ev.target.value);
                idxBox.value = idx || 0;
                show(handDic[keyArr[idx]])
            })
        })
        let idx = 0;
        let isInputShow = false;
        isTrue.onclick = function() {
            isInputShow = !isInputShow;
            if (isInputShow) {
                tarHandIdxDicBox.style.display = 'inline-block';
                idxBox.style.display = 'inline-block';
            } else {
                tarHandIdxDicBox.style.display = 'none';
                idxBox.style.display = 'none';
            }
        }
        function show(_hand) {
            window._hand = _hand;
            _hand.a = _hand.a || {};
            _hand.b = _hand.b || {};
            isTrue.innerText = `${idx}-`
            if (window.tarHandIdxDic[idx] === 1 || window.tarHandIdxDic[idx] === 0) {
                
                if (window.tarHandIdxDic[idx] === 1) isTrue.innerText += '√';
                if (window.tarHandIdxDic[idx] === 0) isTrue.innerText += 'x';
            }
            tarHandIdxDicBox.value = JSON.stringify(window.tarHandIdxDic);
            localStorage.tarHandIdxDic = JSON.stringify(window.tarHandIdxDic);
            idxBox.value = idx;
            // img1.src="/train/pic/18553398010400011165.jpg"
            // img2.src="/train/pic/18553398010400011165.jpg"
            img1.src=`${picDir}pic/${_hand.a.pic_id}.jpg`
            img2.src=`${picDir}pic/${_hand.b.pic_id}.jpg`
            if (!_hand.a.pic_id) cv1.width = cv1.width;
            if (!_hand.b.pic_id) cv2.width = cv2.width;
            let { a, b } = _hand;
            isTooFar.innerText = ''
            isTooFar.innerHTML += `<br/>（↑:标对/↓:标错/←:上一张/→:下一张/[p:找下一张非摄像头/x:找下一张标错的/v:找下一张标对的/t:找一下张限定图][按住ctrl可以找反方向]<br/>`
            if (a.x && b.x) {
                // if (Math.abs(a.x - b.x) > 700 || Math.abs(a.y - b.y) > 400) {
                //     isTooFar.innerHTML += `<br/>被筛掉了`
                // }
                if (Math.abs(a.x/cv1.width - b.x/cv2.width) > 0.35 || Math.abs(a.y/cv1.height - b.y/cv2.height) > 0.35) {
                    isTooFar.innerHTML += `<br/>被筛掉了`
                }
                isTooFar.innerHTML += `<br/>a.x - b.x > ${a.x} ${b.x} >> ${Math.abs(a.x - b.x)} ${Math.abs(a.x - b.x) > 700 ? 'x' : ''}`
                isTooFar.innerHTML += `<br/>a.y - b.y > ${a.y} ${b.y} >> ${Math.abs(a.y - b.y)} ${Math.abs(a.y - b.y) > 400 ? 'x' : ''}`
                isTooFar.innerHTML += `<br/>a.w - b.w > ${a.w} ${b.w} >> ${Math.abs(a.w - b.w)}`
                isTooFar.innerHTML += `<br/>a.h - b.h > ${a.w} ${b.w} >> ${Math.abs(a.h - b.h)}`
            }
            isTooFar.innerHTML += `<br/>${keyArr[idx]} ${a && a.pic_id} ${b && b.pic_id}`
            console.log(keyArr[idx], handDic[keyArr[idx]])
            img1.onload = function(){
                if (cv1.width != img1.width) cv1.width = img1.width;
                if (cv1.height != img1.height) cv1.height = img1.height;
                cv1.addEventListener('mousedown',drawImg1)
                cv1.addEventListener('mouseup', drawBox1)
                drawImg1()
                drawBox1()
            }
            img2.onload = function(){
                if (cv2.width != img2.width) cv2.width = img2.width;
                if (cv2.height != img2.height) cv2.height = img2.height;
                cv2.addEventListener('mousedown',drawImg2)
                cv2.addEventListener('mouseup', drawBox2)
                drawImg2()
                drawBox2()
            }
        }

        function drawImg1() {
            let ctx = cv1.getContext('2d');
            ctx.drawImage(img1, 0, 0);
        }
        function drawBox1() {
            let ctx = cv1.getContext('2d');
            let {x,y,w,h,type} = _hand.a;
            ctx.fillStyle='#ff000044';
            ctx.fillRect(x-100,y-100,100,h+200);
            ctx.fillRect(x+w,y-100,100,h+200);
            ctx.fillRect(x,y-100,w,100);
            ctx.fillRect(x,y+h,w,100);
            ctx.font="30px Georgia";
            ctx.fillStyle='#ff0000ff';
            ctx.fillText(type, x,y-30);
        }

        function drawImg2() {
            let ctx = cv2.getContext('2d');
            ctx.drawImage(img2, 0, 0);
        }
        function drawBox2() {
            let ctx = cv2.getContext('2d');
            let {x,y,w,h,type} = _hand.b;
            ctx.fillStyle='#00ff0044';
            ctx.fillRect(x-100,y-100,100,h+200);
            ctx.fillRect(x+w,y-100,100,h+200);
            ctx.fillRect(x,y-100,w,100);
            ctx.fillRect(x,y+h,w,100);
            ctx.font="30px Georgia";
            ctx.fillStyle='#ff0000ff';
            ctx.fillText(type, x,y-30);
        }
        show(handDic[keyArr[idx]])
    //     for (let i = 0; i < keyArr.length; i++){
    // if (keyArr[i] === '1938493209318906059.json-0') console.log(i)}
        document.addEventListener('keydown', function(ev) {
            let nextOrBack = ev.ctrlKey ? -1 : +1;
            switch(ev.key) {
                case 'p':
                    idx= idx + nextOrBack;
                    while(handDic[keyArr[idx]].a && handDic[keyArr[idx]].a.type == '301') {
                        idx= idx + nextOrBack;
                    }
                    while(handDic[keyArr[idx]].a.pic_id != '19582326081600009286') {}
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);
                    break;
                case 'x':
                    idx= idx + nextOrBack;
                    while(handDic[keyArr[idx]].a && window.tarHandIdxDic[idx] !== 0) {
                        idx= idx + nextOrBack;
                    }
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);
                    break;
                case 'v':
                    idx= idx + nextOrBack;
                    while(handDic[keyArr[idx]].a && window.tarHandIdxDic[idx] !== 1) {
                        idx= idx + nextOrBack;
                    }
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);
                    break;
                case 't':
                    idx+=1;
                    let c = 0
                    while(c++ < 1000) {
                        let _hand = handDic[keyArr[idx]];
                        let { a, b } = _hand;
                        if (!a || !b || !a.w || !b.w) {
                            idx++;
                            //v0.0.2
                        // } else if (a.x && b.x && Math.abs(a.x - b.x) < 450 && Math.abs(a.y - b.y) < 250) {
                        //     idx++;
                            // v0.0.3 还没获取到图片宽高，所以在图里看看
                        } else if (a.x && b.x && Math.abs(a.x - b.x) < 450 && Math.abs(a.y - b.y) < 250) {
                            idx++;
                        } else {
                            if (Math.abs(a.w - b.w) > 15 || Math.abs(a.h - b.h) > 15) {
                                idx++
                            } else {
                                window.tarHandIdxDic[idx] = 0;
                                break
                            }
                        }
                    }
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);
                    break;
                case 'ArrowRight':
                    idx+=1;
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);
                    break;
                case 'ArrowLeft':
                    idx-=1;
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);
                    break;
                case 'ArrowUp':
                    console.log('√')
                    window.tarHandIdxDic[idx] = 1;
                    idx+=1;
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);
                    break;
                case 'ArrowDown':
                    console.log('x')
                    window.tarHandIdxDic[idx] = 0;
                    idx+=1;
                    if (idx>=keyArr.length) idx = keyArr.length-1;
                    if (idx<0) idx = 0;
                    show(handDic[keyArr[idx]]);     
                    break;
                default:
                    console.log('nothing', ev.key);
            }
        })
    </script>
</body>
</html>